.diceGame {
  width: 100%;
  height: 100%;
}
.diceBlock{
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
}
.pause {
  animation-play-state: paused;
}
.animation-active{
  animation: dice-rotate 10s ease-out;
  animation-fill-mode: forwards;
}
.animationActive{
  animation: dice-rotate 0.5s linear infinite;
  animation-fill-mode: forwards;
}
.animation-point{
  animation: var(--animation-name) 2s ease-out;
  animation-fill-mode: forwards;
}
.animationPoint{
  animation: var(--animation-name) 1.5s ease-out;
  animation-fill-mode: forwards;
}
.center{
  width: 5px;
  height: 5px;
}
.diceOne, .diceTwo, .diceThree, .diceFour, .diceFive, .diceSix {
  width: 100px;
  height: 100px;
  position: absolute;
  font-size: 50px;
  line-height: 100px;
  text-align: center;
  border-radius: 5px;
  margin: 50px;
  border: 1px solid #ccc;
}
.diceOne{
  transform: translateZ(50px);
  background: white url(@/assets/images/web-games/dice/dice1.svg) ;
}
.diceTwo{
 transform: translateY(-50px) rotateX(90deg);
 background: white url(@/assets/images/web-games/dice/dice2.svg);
}
.diceThree{
  transform: translateX(50px) rotateY(90deg);
  background: white url(@/assets/images/web-games/dice/dice3.svg);
}
.diceFour{
  transform: translateX(-50px) rotateY(-90deg);
  background: white url(@/assets/images/web-games/dice/dice4.svg);
}
.diceFive{
  transform: translateY(50px) rotateX(-90deg);
  background: white url(@/assets/images/web-games/dice/dice5.svg);
}
.diceSix{
  transform: translateZ(-50px);
  background: white url(@/assets/images/web-games/dice/dice6.svg);
}

@keyframes dice-rotate{
  0%{
    transform: rotateX(0deg) rotateY(0deg);
  }
  100%{
    transform: rotateX(360deg) rotateY(360deg);
  }
}
@keyframes dice-rotate-1{
  from{
    transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    transform: rotateX(360deg) rotateY(360deg);
  }
}
@keyframes dice-rotate-2{
  from{
    transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    transform: rotateX(270deg) rotateY(270deg);
  }
}
@keyframes dice-rotate-3{
  from{
    transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    transform: rotateX(0deg) rotateY(270deg);
  }
}
@keyframes dice-rotate-4{
  from{
    transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    transform: rotateX(180deg) rotateY(270deg);
  }
}
@keyframes dice-rotate-5{
  from{
    transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    transform: rotateX(90deg) rotateY(270deg);
  }
}
@keyframes dice-rotate-6{
  from{
    transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    transform: rotateX(180deg) rotateY(360deg);
  }
}
.dice{
  margin-top: 100px;
}
.buttonBlock{
  margin: 20px 0 10px 20px;
}

